import React from 'react';
import TreeSelect from './index';


export default class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectVal: '1',
            showlevel: 0,
        }
        this.onSelect = this.onSelect.bind(this);
        this.onExpand = this.onExpand.bind(this);
        this.onChecked = this.onChecked.bind(this);
        this.customTitleRender = this.customTitleRender.bind(this);
    }

    componentDidMount() {
    }

    customTitleRender(item) {
        return item.title
    }

    onSelect(val, e) {
        // console.log(val);
    }

    onExpand(val, e) {
        //console.log(val);
    }

    onChecked(Ids, Names, e) {
        const { onChecked, index } = this.props;

        onChecked(Ids, Names, index);
    }

    render() {

        const { showlevel } = this.state;
        const { treeData ,left,top} = this.props;
        // const checkbox = {
        //     enable: true,
        //     parentChain: true,              // child Affects parent nodes;
        //     childrenChain: true,            // parent Affects child nodes;
        //     halfChain: true,                // The selection of child nodes affects the semi-selection of parent nodes.
        //     initCheckedList: []             // Initialize check multiple lists
        // }

        return (
            <div className="App">
                <TreeSelect
                    treeData={treeData}
                    style={{ width: 320, height: 600 }}
                    selectVal={this.state.selectVal}
                    onSelect={this.onSelect}
                    onExpand={this.onExpand}
                    onChecked={this.onChecked}
                    top={top}
                    left={left}
                    //checkbox            = {checkbox}
                    showlevel={showlevel}
                    customTitleRender={this.customTitleRender} />
            </div>
        );
    }
}